<template>
	<div class="risk">
		<!-- <div class="add" @click="_submit()">完成</div> -->
		<!-- <van-search class="info_search" v-model="value" placeholder="搜索" /> -->
				<van-search
		class="info_search"
  v-model="value"
  show-action
  placeholder="请输入搜索关键词"
  @search="onSearch"
>
  <template #action>
	  <!-- <van-button type="info" size="small" @click="submit()" >完成</van-button> -->
    <div @click="_submit()">完成</div>
  </template>
</van-search>
		<van-tabs v-model="active">
			<van-tab title="公司课件库">
				<van-list
					style="margin-top: 10px"
					:finished="finished"
					v-model="loading"
					finished-text="没有更多了"
					@load="onLoad"
				>
					<div class="list">
						<van-checkbox-group v-model="result" @change="handleChange">
							<div
								class="list-item mb-10"
								v-for="(item, index) in list"
								:key="index"
							>
								<div class="list-item-l">
									<van-image
										class="mr-10 image-box-shadow"
										width="50"
										height="50"
										fit="cover"
										:src="baseUrl + item.Cover"
									/>
									<div style="width:220px">
										<div class="mb-5" style="line-height:1.3">{{ item.ResName }}</div>
										<div class="mb-5 text-ellipsis" >
											简介：{{ item.Introduce || '暂无描述' }}
										</div>
										<div class="mb-5">
											<van-image
												style="vertical-align: middle"
												width="16"
												height="16"
												:src="
													require('@/assets/Images/AppIcon/icon_list_post.png')
												"
											/>
											{{ item.CreateChnName }}
										</div>
										<div>
											<van-image
												style="vertical-align: middle"
												width="16"
												height="16"
												:src="
													require('@/assets/Images/AppIcon/icon_calendar.png')
												"
											/>
											{{ item.CreateDate }}
										</div>
									</div>
								</div>
								<van-checkbox :name="item.ResCode" />
								<van-tag class="tags" type="primary">{{
									item.AttExt.slice(1, item.AttExt.length)
								}}</van-tag>
							</div>
						</van-checkbox-group>
					</div>
				</van-list>
			</van-tab>
			<van-tab title="上级分享库">
				<van-list
					style="margin-top: 10px"
					:finished="myFinished"
					v-model="myLoading"
					finished-text="没有更多了"
					@load="myOnLoad"
				>
					<div class="list">
						<van-checkbox-group v-model="upResult" @change="handleUpChange">
							<div
								class="list-item mb-10"
								v-for="(item, index) in myList"
								:key="index"
							>
								<div class="list-item-l">
									<van-image
										class="mr-10 image-box-shadow"
										width="50"
										height="50"
										fit="cover"
										:src="baseUrl + item.Cover"
									/>
									<div>
										<div class="mb-5">{{ item.ResName }}</div>
										<div class="mb-5 text-ellipsis" style="width:220px">
											简介：{{ item.Introduce || '暂无描述' }}
										</div>
										<div class="mb-5">
											<van-image
												style="vertical-align: middle"
												width="16"
												height="16"
												:src="
													require('@/assets/Images/AppIcon/icon_list_post.png')
												"
											/>
											{{ item.CreateChnName }}
										</div>
										<div>
											<van-image
												style="vertical-align: middle"
												width="16"
												height="16"
												:src="
													require('@/assets/Images/AppIcon/icon_calendar.png')
												"
											/>
											{{ item.CreateDate }}
										</div>
									</div>
								</div>
								<van-checkbox :name="item.ResCode" />
								<van-tag class="tags" type="primary">{{
									item.AttExt.slice(1, item.AttExt.length)
								}}</van-tag>
							</div>
						</van-checkbox-group>
					</div>
					<!-- <van-cell v-for="(item, index) in myList" :key="index">
						<van-card
							:title="item.CertName"
							:thumb="baseUrl + item.Attachs"
							@click="handleClick(item.ID)"
						>
							<template #desc>
								<div>姓名：{{ item.WorkCode }} {{ item.OrgName }}</div>
								<div>下次复审日期：{{ item.NextReviewDate }}</div>
							</template>
						</van-card>


						<van-tag v-if="item.ExpireDays > 0" class="tags" type="warning"
							>逾期{{ Math.abs(item.ExpireDays) }}天</van-tag
						>
						<van-tag v-if="item.ExpireDays < 0" class="tags" type="warning"
							>剩{{ Math.abs(item.ExpireDays) }}天</van-tag
						>
					</van-cell> -->
				</van-list>
			</van-tab>
		</van-tabs>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import { list } from '@/api/courseware'
import { Dialog } from 'vant'
export default {
	data() {
		return {
			//   baseUrl: process.env.VUE_APP_BASE_IMG,
			result: [],
			upResult:[],
			active: 0,
			value: '',
			list: [],
			myList: [],
			selectKey: '',
			myFilter: {
				page: 0,
				dataType: 'SuperiorShare',
				subDataType: 'forCourseWithExercise',
			},
			filter: {
				page: 0,
				dataType: 'Company',
				subDataType: 'forCourseWithExercise',
			},
			loading: false,
			finished: false,
			myLoading: false,
			myFinished: false,
			planData: [],
			planUpData: [],
		}
	},
	computed: {
		...mapGetters(['baseUrl']),
	},
	created() {
		this.getList()
		this.getMyList()
	},
	methods: {
    onSearch() {
      var conditions = [];
      if (this.value) {
        conditions.push({
          Name: "Keywords",
          DisplayName: this.value,
          Value: this.value,
          Operator: "like",
          DataType: "String",
        });
      }

      this.myFilter.page = 0;
      this.myFilter.conditions = JSON.stringify(conditions);
      this.getMyList();

      this.filter.page = 0;
      this.filter.conditions = JSON.stringify(conditions);
      this.getList();
    },
		handleChange(ids) {
			this.planData = []
			ids.map((item) => {
				this.list.map((innerItem) => {
					if (innerItem.ResCode == item) {
						this.planData.push({
							Code: innerItem.ResCode,
							Type: this.active + 1,
							ResName: innerItem.ResName,
						})
					}
				})
			})
		},

		handleUpChange(ids){
			this.planUpData = []
			ids.map((item) => {
				this.myList.map((innerItem) => {
					if (innerItem.ResCode == item) {
						this.planUpData.push({
							Code: innerItem.ResCode,
							Type: this.active + 1,
							ResName: innerItem.ResName,
						})
					}
				})
			})
		},
		_submit() {
			// this.$router.push({
			// 	name: this.$route.params.path,
			// 	params: { planData: this.planData },
			// })
			    this.$emit('CallBack',[...this.planData, ...this.planUpData]);
		},
		getMyList() {
			this.myLoading = true
			list(this.myFilter).then((res) => {
				this.myLoading = false
				if (!res.data.HasNextPage) {
					this.myFinished = true
				}
				this.myList = res.data.Data
				this.myFilter.page = res.data.PageIndex
			})
		},
		getList() {
			this.loading = true
			list(this.filter).then((res) => {
				this.loading = false
				if (!res.data.HasNextPage) {
					this.finished = true
				}
				this.list = res.data.Data
				this.filter.page = res.data.PageIndex
			})
		},

		myOnLoad() {
			this.myLoading = true
			++this.myFilter.page
			list(this.myFilter).then((res) => {
				this.myLoading = false
				this.myFilter.page = res.data.PageIndex
				this.myList = this.myList.concat(res.data.Data)
				if (!res.data.HasNextPage) {
					this.myFinished = true
				}
			})
		},

		onLoad() {
			this.loading = true
			++this.filter.page
			list(this.filter).then((res) => {
				this.loading = false
				this.filter.page = res.data.PageIndex
				this.list = this.list.concat(res.data.Data)
				if (!res.data.HasNextPage) {
					this.finished = true
				}
			})
		},
		// 设备详情
		handleClick(item) {
			if (item.Type != 4) {
				this.$router.push({
					path: '/Train/WareDetail',
					query: { id: item.ID,sid: item.SID,stype:item.SType },
				})
			} else {
				this.$router.push({
					path: '/Train/CourseDetail',
					query: { id: item.ID },
				})
			}
		},
	},
}
</script>
<style lang="less">
.info_search {
	padding: 10px;
	border-radius: 5px !important;
	.van-field__control {
		background-color: #ffffff !important;
	}
}
</style>
<style lang="less" scoped>
.risk {
	min-height: 100vh;
	background-color: #e8f1f8;
	.info_search {
		padding: 10px;
		border-radius: 5px !important;
		.van-field__control {
			background-color: #ffffff !important;
		}
	}
}
.list {
	padding: 10px;
	.list-item {
		display: flex;
		align-items: center;
		justify-content: space-between;
		position: relative;
		background-color: #fff;
		padding: 20px 10px;
		font-size: 14px;
		border-radius: 8px;
		.list-item-l {
			display: flex;
			align-items: center;
		}
	}
}


.all_dep {
	background-color: #ffffff;
}
.warn_item {
	margin: 10px;
	/*margin-bottom: 10px;*/
	padding: 10px 0 10px 10px;
	border-radius: 5px;
	position: relative;
}
.warn_header {
	display: flex;
	justify-content: space-between;
	position: relative;
	margin-bottom: 10px;
	.warn_tag {
		position: absolute;
		right: 0;
		top: 0;
		border-radius: 26.64rem 0 0 26.64rem;
	}
}
.dep_sort {
	display: flex;
	align-items: center;
	margin-bottom: 5px;
	img {
		height: 15px;
		width: 15px;
		margin-right: 5px;
	}
}
.dep_btm {
	display: flex;
	justify-content: flex-end;
	.btm_item {
		display: flex;
		align-items: center;
		img {
			height: 15px;
			width: 15px;
			margin-right: 5px;
		}
	}
}

.tags {
	position: absolute;
	right: 0;
	top: 5px;
	border-radius: 26.64rem 0 0 26.64rem;
}
</style>